{% extends "admin/base_site.html" %}

{% block title %}'FanMe' | {{ site_title }}{% endblock %}

{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">FanMe</a></h1>
{% endblock %}

{% block nav-global %}
{% endblock %}

{% block extrahead %}
<link href="{{ STATIC_URL }}dist/css/bootstrap.css" rel="stylesheet">
<script src="{{ STATIC_URL }}js/jquery-1.10.2.js"></script>
<script src="{{ STATIC_URL }}js/highcharts.js"></script>
<script src="{{ STATIC_URL }}js/drilldown.js"></script>
<script>
function myFunction()
{
alert("I am an alert box!");
}
</script>
<script>
    $(function () {
        // Create the chart
        $('#usuarios_activos').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Fans por tópicos'
            },
             xAxis: {
                type: 'category'
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Cant. fans'
                }
            },
            legend: {
                enabled: true
            },
             plotOptions: {
                series: {
                    borderWidth: 0,
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    },
                    dataLabels: {
                        enabled: true,
                    },
                    point: {
                        events: {
                            click: function() {
                                location.href='../fans_por_subtopico?topico=' + this.series.name;
                            }
                        }
                    }
                }
            },
            tooltip: {
                headerFormat: '',
            },
            series: [
                    {% for topico, cant_fans in fans_por_topicos.items %}
                    {
                        name: '{{topico}}',
                        data: [{{cant_fans}}]
                    },
                    {% endfor %}
                ]
        })
    });
</script>
{% endblock extrahead %}

{% block content %}
<div class="row">
    <ol class="breadcrumb">
        <li><a href="javascript:history.go(-1)"><span class="glyphicon glyphicon-arrow-left"></span> Volver al Menú Principal</a></li>
    </ol>
</div>
<div id="usuarios_activos" style="width:100%; height:400px;"></div>
{% endblock content %}
